<!--
 * @Author: SilentVver 928872571@qq.com
 * @Date: 2023-09-03 18:22:57
 * @LastEditors: SilentWaver silentwaver.code@gmail.com
 * @LastEditTime: 2024-02-26 17:05:05
 * @Description: 
 * 
-->
<template>
  <n-dropdown class="sw-web-app-button-dropdown" :options="options" :show="shouldBarOpen">
    <div class="sw-web-app-button" :class="{ isButtonFocus: shouldBarOpen }" :draggable="editMode" @click.stop.prevent="openApp"
      @mousedown.prevent.stop="handleMouseDown" @mouseup.prevent.stop="clearTollBarTimer" @mouseleave="clearTollBarTimer">

      <img class="swab-img" :class="{ isButtonFocus: shouldBarOpen }" :draggable="false" :src="appInfo.icon" />
      {{ appInfo.name }}


    </div>
  </n-dropdown>
</template>

<script>
export default {
  props: { appInfo: Object },
  data() {
    return {
      toolBarTimer: null,
      isBarOpen: false,
    
      options: [{
        label: '用户资料',
        key: 'profile',

      },],
    };
  },
  computed: {
    shouldBarOpen() {
      return this.isBarOpen && this.$store.state.desktop.editMode
    },
    editMode(){
      return this.$store.state.desktop.editMode
    }
  },
  methods: {
    openApp() {
      if (this.editMode) {
        return;
      }

      this.$router.push({ name: 'loadingApp', query: { ...this.appInfo } })
    },
    handleMouseDown(e) {
      this.toolBarTimer = setTimeout(() => {
       
        this.openToolBar()
      }, 1000)

      console.log(e)
    },
    openToolBar() {
      console.log('openBar')
      this.isBarOpen = true;
      console.log(this.$store, 'store')

      this.$store.commit('desktop/changeEditMode', { mode: true })
    },
    clearTollBarTimer() {
      clearTimeout(this.toolBarTimer)
    
      this.toolBarTimer = null
    }
  },
  watch:{
    editMode(newVal){
      if(!newVal){
        this.isBarOpen = false
      }
    }
  }
};
</script>
<style lang="less">
.sw-web-app-button {
  width: 100px;
  height: 100px;
  background-color: aliceblue;
  margin: 10px;
  z-index: 99;
}

.swab-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  box-shadow: 0px 0px 0 1px rgb(229, 229, 229);
  transition: .3s;
  z-index: 99;

  &:active {
    box-shadow: none;
    opacity: 0.4;
    transition: 0s;
  }
}

.is-button-focus {
  z-index: 102;
}
</style>
